<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				width: 400px;
				height: 200px;
				border:2px solid #008000;
				border-radius: 15px;
				margin: auto;
				line-height: 200px;
				text-align: center;
				box-shadow: 10px 10px 10px 10px #000000;
			}
			.div2{
				border: 59px solid #999;
				margin-top: 70px;
				border-image: url(img/ZZ.png)30 30 round;
				/* 谷歌兼容 */
				-webkit-border-image: url(img/ZZ.png)50 50 round;
			}
			.div3{
				width: 100px;
				height: 100px;
				position: relative;
				
				top: 70px;
				background-image: url(img/09.jpg);
				background-position: right bottom;
				background-size: cover;
				/* 背景图像位置 */
				/* background-origin: border-box; */
			}
			.div5{
				background: linear-gradient(red,blue,green);
				margin: 100px;
			}
			.div6{
				background: radial-gradient(red,blue,yellow);
			}
			.div7{
				background: url(img/09.jpg);
				background: ;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			border-radius 属性被用于创建圆角
		</div>
		<div class="div2">border-image图像平铺</div>
		<div class="div3">background-image</div>
		<div class="div5">颜色线性渐变</div>
		<div class="div6">颜色径向渐变</div>
		<div class="div7">练习一</div>
	</body>
</html>
